<template>
  <template v-if="editorStore.sceneDetail?.activityId">
    <Scene>
      <Render />
      <Toolbar />
      <Tools />
      <div class="editor-wrapper dark">
        <Header />
        <div class="editor-main">
          <router-view></router-view>
        </div>
      </div>
    </Scene>
  </template>
</template>

<script lang="ts" setup>
import { useEditorStore } from '@/store/editor';
import { usePanelStore } from '@/store/panel';
import { useStageStore } from '@/store/stage';
import Header from './components/header/index.vue';
import Render from './components/render/index.vue';
import Toolbar from './components/toolbar/index.vue';
import Tools from './components/tools/index.vue';
import Scene from './scene/index.vue';

const editorStore = useEditorStore();
const stageStore = useStageStore();
const panelStore = usePanelStore();

onMounted(async () => {
  await editorStore.init();
  stageStore.init();
  panelStore.init();
});
</script>

<style lang="less" scoped>
.editor-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  color: #fff;
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.4s ease-in;
  pointer-events: none;
  overflow: hidden;

  .editor-main {
    position: relative;
    width: 60px;
    height: calc(100vh - 60px);
    pointer-events: initial;
    .panel-container {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      .bottom-half {
        flex: 1;
        background-color: #2f333b;
        .resizer {
          height: 4px;
        }
      }
    }
    :deep(.el-form) {
      --el-fill-color-blank: rgba(36, 44, 52, 0.3);
      --el-border-color: rgba(69, 72, 81, 0.6);
      --el-text-color-regular: #fff;
      --el-border-radius-base: 4px;
      --el-disabled-bg-color: rgba(36, 44, 52, 0.3);
      --el-disabled-border-color: rgba(69, 72, 81, 0.6);
      .el-input-number {
        &.el-slider__input {
          .el-input-number__decrease,
          .el-input-number__increase {
            background: rgba(36, 44, 52, 0.3);
            border: none;
          }
          .el-input__wrapper {
            background: rgba(36, 44, 52, 0.3);
          }
        }
      }
      .el-slider {
        --el-slider-runway-bg-color: #2f333b;
        --el-slider-button-size: 12px;
      }
      .el-input__inner ::placeholder {
        color: #9a9a9a;
      }
      .el-select {
        width: 100%;
      }
    }
  }
}
.editor-preview {
  opacity: 0;
  :deep(.editor-header),
  :deep(.editor-main) {
    pointer-events: none;
  }
}

.editor-hidden {
  left: -276px;
}
</style>
